<template>
  <header
    style="
      position: sticky;
      top: 0;
      z-index: 1000;
      background-color: white;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      padding: 16px 24px;
    "
  >
    <div
      style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
      "
    >
      <!-- 左侧Logo -->
      <div style="display: flex; align-items: center; gap: 8px">
        <div
          style="
            width: 24px;
            height: 24px;
            background-color: #007bff;
            border-radius: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
          "
        >
          <span style="color: white; font-size: 12px; font-weight: bold">驾</span>
        </div>
        <h1 style="font-size: 20px; font-weight: 600; color: #333">驾校课程中心</h1>
      </div>

      <!-- 中间搜索框 -->
      <div style="position: relative; flex-grow: 1; max-width: 500px; margin: 0 16px">
        <input
          type="text"
          placeholder="搜索科目、教练或课程"
          style="
            width: 100%;
            padding: 8px 16px;
            border: 1px solid #e9ecef;
            border-radius: 24px;
            font-size: 14px;
            outline: none;
            background: #f8f9fa;
          "
        />
        <div
          style="
            position: absolute;
            right: 16px;
            top: 50%;
            transform: translateY(-50%);
            width: 12px;
            height: 12px;
            border: 2px solid #6c757d;
            border-radius: 50%;
          "
        >
          <div
            style="
              position: absolute;
              bottom: -4px;
              right: -4px;
              width: 6px;
              height: 2px;
              background-color: #6c757d;
              transform: rotate(45deg);
            "
          ></div>
        </div>
      </div>

      <!-- 右侧登录按钮 & 用户区域 -->
      <div style="display: flex; align-items: center; gap: 32px">

        <!-- 登录和注册按钮 -->
        <RouterLink to="/login"
          ><button v-if="!isLoggedIn"
            style="
              background-color: #007bff;
              color: white;
              border: none;
              padding: 8px 16px;
              border-radius: 4px;
              cursor: pointer;
            "
          >
            登录
          </button></RouterLink
        >
        <RouterLink to="/register"
          ><button v-if="!isLoggedIn"
            style="
              background-color: #28a745;
              color: white;
              border: none;
              padding: 8px 16px;
              border-radius: 4px;
              cursor: pointer;
            "
          >
            注册
          </button></RouterLink
        >

        <!-- 用户区域 -->
        <el-dropdown v-if="isLoggedIn" trigger="click">
          <el-avatar :size="40" src="" class="avatar" />
          <template #dropdown>
            <el-dropdown-menu>
              <router-link :to="{name: 'userProfile', params: {accountNumber: accountNumber}}">
                <el-dropdown-item>
                  <el-icon><User /></el-icon>
                  <span>个人中心</span>
                </el-dropdown-item>
              </router-link>

              <el-dropdown-item divided @click="logout">
                <el-icon><SwitchButton /></el-icon>
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </header>
</template>
<script setup>
import { onMounted, ref } from 'vue'

const isLoggedIn = ref(false)
let accountNumber = ref(0)
const accountData = JSON.parse(sessionStorage.getItem('account'));
if (accountData) {
  accountNumber = accountData.accountNumber
}
onMounted(() => {
  log()
})
function log(){
  console.log("hhhh",sessionStorage.getItem('account'))
  if(sessionStorage.getItem('account')!=null){
    isLoggedIn.value=true;
  } else {
    isLoggedIn.value=false;
  }
}
function logout() {
  sessionStorage.removeItem('account')
  isLoggedIn.value = false
  accountNumber.value = 0
}
</script>
<style scoped></style>
